<template>
  <view class="orderCenter">
    <u-navbar :background="navObj" :is-back="false" :is-fixed="true" height="89" width="100%">
      <view class="title">申请退款</view>

      <view class="left-box" @tap="onClickLeft">
        <u-icon name="arrow-left" size="40" color="#000"></u-icon>
      </view>
    </u-navbar>

    <view class="prolistview">
      <view class="prolistviewitem">
        <image :src="orderData.image" class="prolistimg"></image>
        <view class="prolistname">
          {{ orderData.name }}
        </view>
        <view class="prolistsku">
          {{ orderData.specifications }}
        </view>
      </view>

      <view class="textview">
        <u-input style="
            background: rgb(242, 242, 242);
            text-align: left;
            border-radius: 10rpx;
            padding: 5rpx;
          " v-model="content" type="textarea" maxlength="10000" placeholder="退款描述" />
      </view>

      <view style="font-weight: bold; margin-top: 40rpx"> 上传图片(选填) </view>

      <view class="uploadingview">
        <view class="imageimg" v-for="(item, index) in images" :key="index">
          <image :src="item" style="width: 218rpx; height: 218rpx"></image>
          <view class="deldiv" @click="delimages(index)"> </view>
        </view>
        <view class="imageimg" @click="choosepic" v-if="images.length < 9">
          <image src="../../static/businessImg/add.png" mode="" style="width: 218rpx; height: 218rpx"></image>
        </view>
      </view>

      <view class="btn" @click="handleSubmitShow"> 提交 </view>
    </view>

    <u-modal v-model="show" confirm-text="确认" cancel-text="取消" title="确认退款" :show-cancel-button="true" width="618"
      :async-close="true" @confirm="handleSubmit" :cancel-style="cancelstyleobj" :confirm-style="confirmstyleobj"
      :title-style="titleObj">
      <view class="slot-content2"> 确定发起退款申请？ </view>
    </u-modal>
  </view>
</template>

<script>
import { orderDetails } from "@/api/user.js";

import { applyRefund } from "@/api/order.js";

import storage from "@/utils/storage.js";

export default {
  data() {
    return {
      sn: "",
      orderData: {},
      navObj: {
        backgroundColor: "#ffffff",
      },
      content: "",
      images: [],
      show: false,
      titleObj: {
        "font-family": "Source Han Sans CN",
        "font-weight": "500",
        "font-size": "53rpx",
        color: "#151F38",
      },
      cancelstyleobj: {
        width: "260rpx",
        height: "77rpx",
        "border-radius": "35rpx",
        "line-height": "77rpx",
        color: "#ffffff",
        "text-align": "center",
        "font-size": "28rpx",
        "background-color": "rgb(216,216,216)",
      },
      confirmstyleobj: {
        width: "260rpx",
        height: "77rpx",
        "border-radius": "35rpx",
        "line-height": "77rpx",
        color: "#ffffff",
        "text-align": "center",
        "font-size": "28rpx",
        "background-color": "rgb(146,207,56)",
        "margin-left": "33rpx",
      },
    };
  },
  onLoad(options) {
    this.sn = options.sn;
    this.loadData();
  },

  methods: {
    onClickLeft() {
      uni.navigateBack();
    },
    loadData() {
      orderDetails({
        id: this.sn,
      }).then((res) => {
        this.orderData = res.data;
      });
    },

    choosepic() {
      const num = 9 - this.images.length;
      const that = this;
      uni.chooseImage({
        count: num,
        sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album", "camera"], //从相册选择
        success: function (res) {
          const filePath = res.tempFilePaths;
          // that.images = filePath

          filePath.forEach((i) => {
            uni.uploadFile({
              url: "http://yzfl.ss5.tunnelfrp.com/yzfl/user/uploadImage", // 服务器上传接口
              filePath: i,
              name: "file", // 必须填写，后台用来接收文件

              success: function (uploadFileRes) {
                console.log(uploadFileRes.data);
                that.images.push(JSON.parse(uploadFileRes.data).data);
              },
              fail: function (uploadFileErr) {
                console.log(uploadFileErr); // 上传失败后的操作
              },
            });
          });
        },
      });
    },

    delimages(index) {
      let arr = this.images;
      arr.splice(index, 1);
      this.images = arr;
    },

    handleSubmitShow() {
      this.show = true;
    },

    handleSubmit() {
      this.show = false;
      uni.showLoading({
        title: "加载中",
      });
      let img = "";
      if (this.images != []) {
        img = this.images.join(",");
      } else {
        img = "";
      }

      applyRefund({
        userId: storage.getUserInfo().id,

        orderId: this.sn,
        refundImageList: img,
        refundDescribe: this.content,
      })
        .then((res) => {
          uni.hideLoading();
          uni.showToast({
            icon: "success",
            title: "申请成功",
          });
          uni.navigateTo({
            url: "/pages/order/afterSales/afterSales",
          });
        })
        .catch((_) => {
          uni.hideLoading();
        });
    },
  },
};
</script>

<style scoped>
.orderCenter {
  width: 100%;
}

.title {
  position: absolute;
  top: 80rpx;
  left: 50%;
  transform: translateX(-50%);
  font-family: PingFang;
  font-weight: bold;
  font-size: 33rpx;
  color: #000;
}

.left-box {
  padding-left: 41rpx;
}

.orderbg {
  width: 100%;
  height: 436rpx;
  background: url("../../static/img/orderbg.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
}

.prolistview {
  width: 708rpx;
  margin: 30rpx auto;
  background: #ffffff;
  padding: 27rpx 20rpx;
}

.prolistviewitem {
  width: 100%;
  height: 104rpx;
  margin-bottom: 28rpx;
  position: relative;
}

.prolistimg {
  width: 104rpx;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.prolistname {
  width: 500rpx;
  height: 27rpx;
  font-family: PingFang;
  font-weight: bold;
  font-size: 27rpx;
  color: #151f38;
  line-height: 27rpx;
  position: absolute;
  top: 5rpx;
  left: 139rpx;
}

.prolistsku {
  font-family: PingFang;
  font-weight: 500;
  font-size: 23rpx;
  color: #878c9a;
  height: 23rpx;
  line-height: 23rpx;
  position: absolute;
  bottom: 8rpx;
  left: 141rpx;
}

.uploadingview {
  margin-top: 20rpx;
  width: 100%;
  /* background: red; */
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.imageimg {
  position: relative;
  width: 218rpx;
  height: 218rpx;
  padding: 15rpx;
  margin-bottom: 15rpx;
  /* margin-right: 10rpx; */

  image {
    width: 100%;
    height: 100%;
  }
}

.deldiv {
  width: 31rpx;
  height: 31rpx;
  background: url("../../static/businessImg/del.png") no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: -10rpx;
  right: -10rpx;
}

.btn {
  width: 650rpx;
  height: 91rpx;
  border-radius: 50rpx;
  line-height: 91rpx;
  text-align: center;
  font-family: PingFang;
  font-weight: bold;
  font-size: 29rpx;
  color: #ffffff;
  margin-top: 40rpx;
  background: rgb(146, 207, 56);
}

.slot-content2 {
  height: 145rpx;
  line-height: 145rpx;
  text-align: center;
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 38rpx;
  color: #707070;
}
</style>
